<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        收集表单数据：
            若：<input type="text">，则v-model收集的是value值，用户输入的就是value值
            若：<input type="radio">，则v-model收集的是value值，且要给标签配置value值
            若：<input type="checkbox">，
                1.没有配置input的value值，那么收集的就是checked（布尔值）
                2.配置input的value属性：
                    （1）v-model的初始值是非数组，那么收集的就是checked（布尔值）
                    （2）v-model的初始值是数组，那么收集的就是value组成的数组
                备注：v-model的三个修饰符：
                    lazy：失去焦点再收集数据
                    number：输入字符串转为有效的数字
                    trim：输入首尾空格过滤
    -->

    <div id="root">
      <form @submit.prevent="demo">
        <!-- <label for="demo">账号：</label>
            <input id="demo" type="text"> -->
        账号：<input type="text" v-model.trim="userInfo.account" /><br /><br />
        密码：<input type="password" v-model="userInfo.password" /><br /><br />
        年龄：<input type="number" v-model.number="userInfo.age" /><br /><br />
        性别： 男<input
          name="sex"
          type="radio"
          v-model="userInfo.sex"
          value="male"
        />
        女<input
          name="sex"
          type="radio"
          v-model="userInfo.sex"
          value="female"
        /><br /><br />
        爱好： 唱<input
          type="checkbox"
          v-model="userInfo.hobbies"
          value="sing"
        />
        跳<input type="checkbox" v-model="userInfo.hobbies" value="dance" />
        rap<input type="checkbox" v-model="userInfo.hobbies" value="rap" />
        <br /><br />
        所属校区：
        <select v-model="userInfo.campus">
          <option value="">请选择校区</option>
          <option value="xianlin">仙林</option>
          <option value="fujianlu">福建路</option>
          <option value="qiaotou">桥头</option></select
        ><br /><br />
        其他信息:
        <textarea v-model.lazy="userInfo.other" cols="30" rows="10"></textarea
        ><br /><br />
        <input type="checkbox" v-model="userInfo.agree" />阅读并接受
        <a href="http://www.nufe.edu.cn/">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        userInfo: {
          account: "",
          password: "",
          age: "",
          sex: "male",
          hobbies: [],
          campus: "xianlin",
          other: "",
          agree: false,
        },
      },
      methods: {
        demo() {
          console.log(JSON.stringify(this.userInfo));
        },
      },
    });
  </script>
</html>
